import PropTypes from 'prop-types'
import React, { memo, useEffect, useState } from 'react'
import { PictureViewWrapper } from './style'
import IconClose from '@/assets/svg/icon-close'
import IconArrowLeft from '@/assets/svg/icon-arrow-left'
import IconArrowRight from '@/assets/svg/icon-arrow-right'
import IconTriangleArrowBottom from '@/assets/svg/icon-triangle-arrow-bottom'
import Indicator from '../indicator'
import classNames from 'classnames'
import { CSSTransition, SwitchTransition } from 'react-transition-group'
import IconTriangleArrowTop from '@/assets/svg/icon-triangle-arrow-top'

const PictureView = memo((props) => {   
    const {clickClose, pictures, initIndex = 0} = props
    // 当前显示图片的下标
    const [currentIndex, setCurrentIndex] = useState(initIndex)
    // 是否为下一个 true下一个  false上一个（为了控制图片切换向左向右的动画）
    const [isNext, setIsNext] = useState(true)
    // 是否显示预览框（指示器图框） true显示 false隐藏
    const [showList, setShowList] = useState(true)
    // 该组件渲染时 滚动条应该消失（覆盖全屏）
    useEffect(() => {
        document.body.style.overflow = "hidden"
        // 改组件卸载时 滚动条出现
        return () => document.body.style.overflow = "auto"
    }, [])
    // 设置关闭按钮回掉（调用该组件的组件需通过state自己控制该组件的显示和隐藏）
    function closeBtnClickHandle(){
        if(clickClose) clickClose()
    }
    // 处理向左向右点击
    function controlClickHandle(isNext){
        let index = isNext ? currentIndex + 1 : currentIndex - 1
        // 越界处理
        if(index < 0) index = pictures.length - 1
        if(index > pictures.length - 1) index = 0
        // 设置当前显示图片的下标
        setCurrentIndex(index)
        // 设置为向左滚动动画还是向右滚动动画  transform: translateX(${props => props.isnext ? "100px" : "-100px"});
        setIsNext(isNext)
    }
    // 点击预览图片里面的小图片
    function listClickHandle(index) {
        setCurrentIndex(index)
        // 判断是当前元素之前还是之后 用于做滚动动画
        const next = index > currentIndex ? true : false
        setIsNext(next)
    }

  return (
    <PictureViewWrapper isnext={isNext} showlist={showList}>
        <div className='top'>
            <div className='close-btn' onClick={closeBtnClickHandle}>
            <IconClose/>
            </div>
        </div>
        <div className='slider'>
            <div className='control'>
            <div className='btn left' onClick={e => controlClickHandle(false)}>
                <IconArrowLeft width="77" height="77"/>
            </div>
            <div className='btn right' onClick={e => controlClickHandle(true)}>
                <IconArrowRight width="77" height="77"/>
            </div>
            </div>
            <div className='picture'>
                <SwitchTransition mode='in-out'>
                    <CSSTransition
                        key={pictures[currentIndex]}
                        classNames="pic"
                        timeout={200}
                    >
                        <img src={pictures[currentIndex]} alt="" />
                    </CSSTransition>
                </SwitchTransition>
            </div>
        </div>
        <div className='preview'>
        <div className='info'>
          <div className='desc'>
            <div className='count'>
              <span>{currentIndex+1}/{pictures.length}:</span>
              <span>room apartment图片{currentIndex+1}</span>
            </div>
            <div className='toggle' onClick={e => setShowList(!showList)}>
              <span>{showList ? "隐藏": "显示"}照片列表</span>
              { showList? <IconTriangleArrowBottom/>: <IconTriangleArrowTop/> }
            </div>
          </div>
          <div className='list'>
            <Indicator currentIndex={currentIndex}>
              {
                pictures.map((item, index) => {
                  return (
                    <div 
                      className={classNames("item", { active: currentIndex === index })}
                      key={item}
                      onClick={e => listClickHandle(index)} 
                    >
                      <img src={item} alt="" />
                    </div>
                  )
                })
              }
            </Indicator>
          </div>
        </div>
      </div>
    </PictureViewWrapper>
  )
})

PictureView.propTypes = {
    clickClose: PropTypes.func, //点击关闭按钮的回掉函数
    pictures: PropTypes.array, // 传入的图片数组
    initIndex: PropTypes.number // 初始化当前的图片显示下标
}

export default PictureView